<!DOCTYPE html>
<html>
<head>
<!-- always start with these two lines to set a clean baseline for different devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>

<title>Docs</title>
</head>
<body class="black whitet">
<style>
	/*
		Choose white text on a black background so you can add color in.
		Pick your favorite font and choose a font size.
	*/
	@import url('https://fonts.googleapis.com/css?family=Oxygen');
	html, body {
		font-family: "Oxygen", sans-serif;
	}

	[contenteditable]:focus {
		outline: none;
	}

	.meta-on, div:hover, ul:hover, ol:hover, li:hover, p:hover, span:hover, form:hover, button:hover, input:hover, textarea:hover, img:hover {
		outline: 1px solid;
		animation: meta-on 3s infinite;
		transition: none !important;
	} @keyframes meta-on {
	  0%   {outline-color: magenta;}
	  33% {outline-color: cyan;}
	  66%  {outline-color: yellow;}
	  100% {outline-color: magenta;}
	}
</style>

<div class="hold full hue2">
	<div id="page" class="max focus gap" style="margin-top: 9%;"></div>
</div>

<script src="../../gun/gun.js"></script>
<script src="../../gun/lib/monotype.js"></script>
<script src="../../gun/lib/meta.js"></script>
<script src="../../gun/lib/normalize.js"></script>
<script async src="../../gun/lib/fun.js"></script>

<script async src="../../gun/lib/wave.js"></script>
<!-- script async src="https://edide.io/music.lib"></script -->

<script>
var gun = Gun();
var page = {};
//var gun = Gun(['https://guntest.herokuapp.com/gun', 'http://localhost:8765/gun']);

;(window.onhashchange = function(){
	var file = (location.hash||'').slice(1);
	var S = +new Date;
	$('#page').empty().attr('contenteditable', 'false');
	gun.get('test/gun/docs/'+file).get('what').map().on(function render(data, i, msg, eve){
		var tmp = page[i] || '';
		var last = Gun.state.is(gun._.root.graph[msg.put['#']], i);
		if(last < tmp.last){ return }
	//});
		//if(window.LOCK){ return }
		var p = $('#page').children().get(i);
		if(!p){
			$('#page').append('<p>');
			setTimeout(function(){ render(data, i, msg, eve) },0);
			return;
		}
		var DBG = {s: +new Date};
		var r = monotype(p);
		DBG.mono = +new Date;
		var safe = $.normalize(data);
		DBG.norm = +new Date;
		p.outerHTML = data;
		DBG.html = +new Date;
		r.restore();
		DBG.rest = +new Date;
		//console.log("mono:", DBG.mono - DBG.s, "norm:", DBG.norm - DBG.mono, 'html:', DBG.html - DBG.norm, 'rest:', DBG.rest - DBG.html, ':::', msg, eve);
	});
})();


window.requestAnimationFrame = window.requestAnimationFrame || setTimeout;
window.requestAnimationFrame(function frame(){
	window.requestAnimationFrame(frame, 16);
	
}, 16);

document.execCommand('defaultParagraphSeparator', false, 'p');
meta.edit({
	name: "Edit",
	combo: ['E'],
	use: function(eve){
		console.log('on');
	}, on: function(eve){
		if($(eve.target).closest('p').length){ return }
		var edit = this;
		setTimeout(function(){ meta.flip(false) },1);
		edit.init();
		$(document).on('keydown.tmp', '[contenteditable]', function(eve){
			if(eve.which != 13){ return }
			eve.preventDefault();
			var r = window.getSelection().getRangeAt(0);
			var c = r.commonAncestorContainer, p;
      r.deleteContents();
      var p = c.splitText? $(c.splitText(r.startOffset)).parent() : $(c);
      var n = $("<"+p.get(0).tagName+">"), f;
      p.contents().each(function(){
      	if(this === c){ return f = true }
      	if(!f){ return }
      	n.append(this);
      });
      p.after(n);
      edit.select(n.get(0));
      // make sure we re-save & sync each changed paragraph.
      edit.save(p);
      p.nextAll().each(function(){
      	edit.save(this);
      });
		}).on('keyup.tmp', '[contenteditable]', function(eve){
			//$('#debug').val(doc.html());
			var p = $(window.getSelection().anchorNode).closest('p'), tmp;
			(tmp = page[p.index()] || (page[p.index()] = {})).last = (+new Date) + 99;
			clearTimeout(tmp.to); tmp.to = setTimeout(function(){
			var DBG = {s: +new Date};
			var r = monotype(p);
			DBG.m = +new Date;
			var html = p.html() || '';
			DBG.g = +new Date;
			if(!html && !p.prev().length && !p.next().length && !$('#page').html()){
				edit.init();
			}
			DBG.i = +new Date;
			var safe = $.normalize(html);
			DBG.n = +new Date;
			p.html(safe);
			DBG.h = +new Date;
			r.restore();
			DBG.r = +new Date;
			edit.save(p);
			DBG.p = +new Date;
			//console.log("save:", DBG.p - DBG.r, "rest:", DBG.r - DBG.h, "html:", DBG.h - DBG.n, "norm:", DBG.n - DBG.i, 'init:', DBG.i - DBG.g, 'grab:', DBG.g - DBG.m, 'mono:', DBG.m - DBG.s);
		},50)});
	},
	up: function(){
		console.log("UP");
		$('[contenteditable=true]').off('.tmp');
	},
	init: function(){
		var edit = this;
		var doc = $('#page').attr('contenteditable', 'true');
		if(!doc.text()){
			doc.html('<p class="loud crack"></p>');
		}
		edit.select(doc.children().first().get(0));
	},
	save: function(p){
		p = $(p);
		var i = p.index();// = Array.prototype.indexOf.call(parent.children, child);
		var file = (location.hash||'').slice(1);
		var data = (p.get(0)||{}).outerHTML||'';
		//data = $.normalize(data); // GOOD TO DO SECURITY ON SENDING SIDE TOO!!!
		window.LOCK = true;
		gun.get('test/gun/docs/'+file).get('what').get(i).put(data);
		window.LOCK = false;
	},
	select: function(p){
		var s = window.getSelection(),
		r = document.createRange();
		if(p.innerHTML){
      r.setStart(p, 0);
			r.collapse(true);
			s.removeAllRanges();
			s.addRange(r);
			return;
		}
		p.innerHTML = '\u00a0';
		r.selectNodeContents(p);
		s.removeAllRanges();
		s.addRange(r);
		document.execCommand('delete', false, null);
	}
});

;(function(){

	meta.edit({name: "Design", combo: ['D']});
	meta.edit({name: "Fill", combo: ['D','F'], // TODO!
		use: function(eve){},
		on: function(eve){
			var on = meta.tap();
			meta.ask('Color name, code, or URL?', function(color){
				on.css('background', color);
			}, true);
		},
		up: function(eve){}
	});

	meta.edit({name: "Add", combo: ['D','A']});
	meta.edit({name: "Row", combo: ['D','A', 'R'],
    on: function(eve){
			meta.tap().append('<div style="min-height: 9em; padding: 2%;">');
    }
	});
	meta.edit({name: "Columns", combo: ['D','A','C'],
    on: function(eve){
			var on = meta.tap().addClass('center'), tmp, c;
			var html = '<div class="unit col" style="min-height: 9em; padding: 2%;"></div>';
			if(!on.children('.col').length){ html += html }
			c = (tmp = on.append(html).children('.col')).length;
			tmp.each(function(){
	    	$(this).css('width', (100/c)+'%');
			})
    }
	});
	meta.edit({name: "Text", combo: ['D','A','T'],
    on: function(eve){
    	var tag = $('<p>text</p>');
			meta.tap().append(tag);
			tag.focus();
    }
	});
	meta.edit({name: "Delete", combo: ['D','A','D'],
    on: function(eve){
    	meta.tap().remove();
    }
	});

	meta.edit({name: "Turn", combo: ['D','T']});
	meta.edit({name: "Size", combo: ['D','S']});
	meta.edit({name: "X", combo: ['D','S','X'],
		on: function(eve){
			var on = this.a = meta.tap().addClass('meta-on'), was = on.width();
			$(document).on('mousemove.tmp', function(eve){
				var be = was + ((eve.pageX||0) - was);
				on.css({'max-width': be, width: '100%'});
			});
			meta.ask('Width in px, %, or other unit?', function(w){
				if(!w){ return }
				on.css({'max-width': w, width: '100%'});
			}, true);
		}, up: function(){
			$(document).off('mousemove.tmp');
			this.a.removeClass('meta-on');
		}
	});
	meta.edit({name: "Y", combo: ['D','S','Y'],
		//on: function(eve){ console.log('on Y') },
		on: function(eve){ console.log('use Y')
			var on = this.a = meta.tap().addClass('meta-on'), was = on.height();
			$(document).on('mousemove.tmp', function(eve){
				var be = was + ((eve.pageY||0) - was);
				on.css({'min-height': be});
			})
		}, up: function(){ console.log('up Y')
			$(document).off('mousemove.tmp');
			this.a.removeClass('meta-on');
		}
	});
}());

;(function(){
	var logic = {};

	meta.edit({name: "Logic", combo: ['L']});

	meta.edit({name: "Symbol", combo: ['L','S'],
    on: function(eve){
    	console.log(1);
    }
	});
	meta.edit({name: "Action", combo: ['L','A'],
    on: function(eve){
    	console.log(2);
    }
	});
	meta.edit({name: "Data", combo: ['L','D'],
    on: function(eve){
    	console.log(3);
    }
	});
}());

;(function(){
	var song = {};
	// TODO:
	// 1. Manually OR automatically load music.js API, dependencies, and modules. - FINE for now
	// 2. only export music API, not meta, not dom, not mouselock system, not UI/html, etc. better module isolation and export.
	// 3. `var wave = Wave('a').play()` // also on `Music.now`
	// defaults... instrument: pure tones, volume curve: |\_ , speed curve: 0.5
	// 4. `wave.blur(0.5).itch(0.5);`
	// 5. wave.long(2); // how long in seconds each note plays, optionally: wave.pace(60) is bpm
	// 6. wave.loud(0.5); // 0% to 100% volume loudness of device output.
	// 7. wave.vary(0.5); // slows down or speeds up wiggle per harmonic
	// 8:
	// wave structure, does ToneJS allow us to change the sine wave smoothness/type continuously or is it a pre-fixed type?
	// wave structure: /\/\/, |_|, /|/, \|\| do some research with ToneJS whether these are dynamic or fixed
	// wave.itch(); // changes the shape of the wiggle from smooth sine to square or triangle
	// wave.blur(220hz); // blur may not apply/work on pure notes other than filtering them.

	meta.edit({name: "Music", combo: ['M']});

	meta.edit({name: "Play", combo: ['M','P'],
    on: function(eve){
    	// TODO: We still need to add to meta API ability to change name.
    	if(song.play){
				music.stop();
				song.play = false;
				return;
    	}
    	song.play = true;
    	music.stop();
    	setTimeout(function(){
				song.now = wave($('#page').text()).play();
    	},250);
    }
	});

	meta.edit({name: "Blur", combo: ['M','B'],
    on: function(eve){
			$(document).on('mousemove.tmp', function(eve){
				var x = eve.pageX;
				song.now.loud(x/$('body').innerWidth());
			});
    },
    up: function(){
    	$(document).off('.tmp');
  	}
	});

	$(document).on('keydown', function(eve){
		if(eve.which === music.which){ return }
		music.play(String.fromCharCode(music.which = eve.which));
	});

}());
;(function(){
/*
	Edit
		Bold
		Italic
		Link
		?
			Left
			Middle
			Right
			Justify
		?
			Small
			Normal
			Header
			Title
	Design
		Add
			Row
			Column
			Text
			Delete
		Turn
		Grab
		Size
			X
			Y
		Fill
	Logic
		Symbol
		Action
		Data
*/
/*

*/
}());
</script>
</body>
</html>